<template>
	<div class="passwrod">
		<div>
			<img src="../assets/img/7519.png" alt="" @click="$router.go(-1)" />
			<span>提现密码</span>
			<div class="queren" @click="sp" v-if="this.shuju.TxPassWord == ''">
				确认
			</div>
			<div class="wj" @click="ssp" v-if="this.shuju.TxPassWord != ''">
				忘记密码
			</div>
		</div>
		<div class="box txmm" v-if="mi">
			<span>提现密码</span>
			<input type="password" v-model="pas" placeholder="请输入6位支付密码(数字+字母)" @input="ssr" />
		</div>
		<div class="box qrmm" v-if="mi">
			<span>确认密码</span>
			<input type="password" v-model="pas1" placeholder="再次输入6位支付密码(数字+字母)" @input="ssr" />
		</div>
		<div class="box txmm1" v-if="play">
			<span>提现密码</span>
			<input type="password" v-model="pas2" />
		</div>
		<p class="p1">密码不能为空</p>
		<p class="p2">密码格式错误</p>
		<p class="p3">两次密码不相同</p>
		<p class="p4">密码正确</p>
		<p class="p5">修改完成</p>
	</div>
</template>

<script>
	import local from "@/utils/local";
	import {getUser} from "@/api/index.js";
	import {SetTxPwd} from "@/api/all.js"
	export default {
		data() {
			return {
				play: false,
				mi: true,
				pas: "",
				pas1: "",
				pas2: "",
				flag: false,
				shuju: {},
				zzbds: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/,

			};
		},
		mounted() {
			getUser().then(res =>{
				if(res.Code == 200){
					let Data = res.Data
					console.log(Data.TxPassWord, 'qqqqqqqqqqqq');
					this.shuju = Data;
					this.pas2 = Data.TxPassWord;
					if (Data.TxPassWord == "") {
						this.mi = true;
						this.play = false;

					} else {
						this.mi = false;
						this.play = true;
					}
				}
			})
		},
		methods: {
			ssp() {
				this.$router.replace("/CPassword");
			},
			sp() {
				if (this.pas == "" || this.pas1 == "") {
					this.$notify({

						message: '请填写正确的密码',
						type: 'warning',
						position:'top-left',
						duration:1500
					});
					this.flag = false;
				}else if(!(this.zzbds.test(this.pas) || this.zzbds.test(this.pas1))){
					this.$notify({
						message: '密码格式不正确',
						type: 'warning',
						position:'top-left',
						duration:1500
					});
				}else if(this.pas !=this.pas1){
					this.$notify({
						message: '密码不一致',
						type: 'warning',
						position:'top-left',
						duration:1500
					});
				}else {
					this.flag = true;
					let data = {
						Pwd: this.pas,
						ConfirmPwd: this.pas1,
						OldPwd:""
					}
					SetTxPwd(data).then(res =>{
						console.log(res,'qqqqqqqq');
							let code =  res.Code;
							if(code == 200){
								document.querySelector(".p5").style.display = "block";
								document.querySelector(".p4").style.display = "none";
								document.querySelector(".p3").style.display = "none";
								document.querySelector(".p2").style.display = "none";
								document.querySelector(".p1").style.display = "none";
								setTimeout(() => {
									this.$router.replace("/kabao");
								}, 1000);
							}else{
								alert(res.Message);
								
							}
					})

				}
			},
			ssr() {
				if (this.pas == "" && this.pas1 == "") {			
					document.querySelector(".p1").style.display = "block";
					document.querySelector(".p3").style.display = "none";
					document.querySelector(".p2").style.display = "none";
					document.querySelector(".p5").style.display = "none";
					document.querySelector(".p4").style.display = "none";
					this.flag = false;
				} else if (!(this.zzbds.test(this.pas) && this.zzbds.test(this.pas))) {
					document.querySelector(".p2").style.display = "block";
					document.querySelector(".p3").style.display = "none";
					document.querySelector(".p4").style.display = "none";
					document.querySelector(".p5").style.display = "none";
					document.querySelector(".p1").style.display = "none";
					this.flag = false;
				} else if (this.pas != this.pas1) {
					document.querySelector(".p3").style.display = "block";
					document.querySelector(".p4").style.display = "none";
					document.querySelector(".p2").style.display = "none";
					document.querySelector(".p5").style.display = "none";
					document.querySelector(".p1").style.display = "none";
					this.flag = false;
				} else {
					document.querySelector(".p4").style.display = "block";
					document.querySelector(".p3").style.display = "none";
					document.querySelector(".p2").style.display = "none";
					document.querySelector(".p1").style.display = "none";
					document.querySelector(".p5").style.display = "none";
					this.flag = true;
				}
			},
		},
		created() {

		},
	};
</script>

<style lang="less" scoped>
	.p5 {
		color: chartreuse !important;
	}

	.p1,
	.p2,
	.p3,
	.p4,
	.p5 {
		text-align: center;
		color: #f04419;
		font-size: 0.9rem;
		display: none;
		margin-top: 4%;
	}

	.box>input {
		height: 100%;
		border: 0px;
		outline: none; //取消默认选中的样式
		width: 75%;
	}

	.box>span {
		margin-right: 3%;
	}

	.box {
		width: 90%;
		height: 7%;
		display: flex;
		align-items: center;
		font-size: 0.9rem;
		font-weight: 400;
		color: #333333;
		margin: 0 auto;
		border-bottom: 1px solid #e6e6e6;
	}

	.passwrod>div:first-child>img {
		width: 0.9375rem;
		height: 0.9375rem;
	}

	.passwrod>div:first-child {
		width: 100%;
		height: 7%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 3%;
		padding-right: 4%;
		box-sizing: border-box;
		font-size: 1.1rem;
		font-weight: 500;
		color: #3a3a3a;
		border-bottom: 1px solid #e6e6e6;
	}

	.queren,
	.wj {
		font-size: 0.9rem;
		font-weight: 400;
		color: #374ef2;
	}

	.passwrod {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>
